<template>
 <div>
   <el-dialog
     title="添加产品"
     :visible.sync="dialogTableVisible"
     :close-on-click-modal="false"
     width="900px">
     <el-row>
       <el-col :span="6">
         <el-tree
           :data="deptOptions"
           :props="defaultProps"
           show-checkbox
           :expand-on-click-node="true"
           :filter-node-method="filterNode"
           ref="tree"
           check-on-click-node
           default-expand-all
           @check-change="handleCheckChange"
         />
       </el-col>
       <el-col :span="18" class="chuanpin">

         <el-form :model="queryParams" ref="queryForm" :inline="true">
           <el-form-item label="产品编号" >
             <el-input
               v-model="queryParams.code"
               placeholder="请输入产品编号"
               clearable
               size="small"
             />
           </el-form-item>
           <el-form-item label="产品名称" >
             <el-input
               v-model="queryParams.name"
               placeholder="请输入产品名称"
               clearable
               size="small"
             />
           </el-form-item>

           <el-form-item>
             <el-button type="primary" icon="el-icon-search" size="mini" @click="">搜索</el-button>
           </el-form-item>
         </el-form>
         <el-table v-loading="loading" :data="chanpinList" stripe
                   @selection-change="chanpinonChange" >
           <el-table-column align="center" type="selection" width="55"></el-table-column>
           <el-table-column align="center" type="index" label="序号"  width="55"  />
           <el-table-column align="center" label="产品编号" property="code" width="150" ></el-table-column>
           <el-table-column align="center" label="产品名称"   property="name" :show-overflow-tooltip="true"  ></el-table-column>
           <el-table-column align="center" label="单位" property="danwei" :show-overflow-tooltip="true" width="150" ></el-table-column>
           <el-table-column align="center" label="分类"  property="fenlei" width="100" ></el-table-column>
         </el-table>
         <el-pagination
           @size-change="handleSizeChange"
           @current-change="handleCurrentChange"
           :current-page="1"
           :page-sizes="[10, 20, 30, 40]"
           :page-size="10"
           layout="total, sizes, prev, pager, next, jumper"
           style="margin-top: 15px"
           :total="40">
         </el-pagination>
       </el-col>
     </el-row>


     <span slot="footer" class="dialog-footer">
        <el-button type="primary"  size="mini" @click="determine">确 定</el-button>
      </span>
   </el-dialog>
 </div>
</template>

<script>
  import { treeselect } from "@/api/system/dept";
  export default {
    props: ['routerData'],
    name: "Role",
    data() {
      return {
        loading:false,
        dialogTableVisible:true,
        //产品查询数据
        queryParams:{
          code:'',
          name:'',
        },
        newxuanz:'',//当前选中的
        deptOptions:[],//树形图数据
        defaultProps: {
          children: "children",
          label: "label"
        },
        //产品列表数据
        chanpinList:[
          {code:'HC2018121300111',name:'运输车',danwei:'辆',fenlei:'车辆'},
          {code:'HC2018121300112',name:'运输车',danwei:'辆',fenlei:'车辆'},
          {code:'HC2018121300113',name:'运输车',danwei:'辆',fenlei:'车辆'},
          {code:'HC2018121300114',name:'运输车',danwei:'辆',fenlei:'车辆'}
        ],

      };
    },
    components:{

    },
    watch: {
      dialogTableVisible: function () {
        this.dialogTableVisible = true;//始终让他为true;
        this.cancel();//隐藏
      },
    },
    created() {
      console.log('接受',this.routerData)
      this.getTreeselect();//树形图查询
    },
    methods: {
      //确定
      determine:function(){

        this.$emit('callback',this.chanpinList)//将submitModel的值传给父组件
      },
      //隐藏
      cancel:function(){
        this.determine()

      },
      /** 查询部门下拉树结构 */
      getTreeselect() {
        treeselect().then(response => {
          this.deptOptions = response.data;
        });
      },
      //产品表格监听
      chanpinonChange(val) {
        console.log(val)
      },
      //分页
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
      },
      // 筛选节点
      filterNode(value, data) {
        if (!value) return true;
        return data.label.indexOf(value) !== -1;
      },
      // 节点单击事件
      handleCheckChange(data, checked, indeterminate) {
        var rad=''
        var ridsa = this.$refs.tree.getCheckedKeys().join(',')// 获取当前的选中的数据[数组] -id, 把数组转换成字符串
        var ridsb = this.$refs.tree.getCheckedNodes()// 获取当前的选中的数据{对象}
        ridsb.forEach(ids=>{//获取选中的所有的父级id
          rad+=','+ids.id
        })
        rad=rad.substr(1) // 删除字符串前面的','
        var rids=rad+','+ridsa
        var arr=rids.split(',')//  把字符串转换成数组
        arr=[...new Set(arr)]; // 数组去重
        console.log('arr',arr)
        rids=arr.join(',')// 把数组转换成字符串
        console.log(rids)
      },


    }
  };
</script>
<style >





</style>
